<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步:引入依赖包 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 第二步：准备容器(模板) -->
    <div class="app">
         <h1>你好,{{name}}</h1>
         <hr>
         <h1>胡子语法里面可以书写JS表达式</h1>
         <h2>{{ 1 + 1 }}</h2>
         <h2>{{ 2**4 }} 代表的是 2 的 4 次幂</h2>
         <h2>{{ 3 > 5 }}</h2>
         <h2>{{ 66 > 99 ? 66 : 99}}</h2>
         <h2>{{ "我爱你塞北的大雪" + 22 }}</h2>
         <h2>{{'qwe'.toUpperCase()}}</h2>
         <h2>{{address.toUpperCase()}}</h2>
    </div>
</body>
</html>
<script>
     
      const vm = new Vue({
           el:'.app',//将实例与容器进行关联
           data:{ //data配置项，主要的作用是给实例添加属性
              name:'文童',
              age:16,
              address:'abc'
           }
      });

     
</script>